<template>
  <div>
    <el-card class="box-construction" shadow="always">
      <div class="box-title box-title-position">
        <div>项目列表</div>
        <el-button
          v-if="!uid && isAdmin == 1 ? true : false"
          class="add-btn"
          size="medium"
          type="primary"
          @click="addProject()"
          >我要立项</el-button
        >
      </div>
      <div style="width: 100%; margin-top: 25px">
        <SearchForm ref="searchForm" @saveForm="submitSearch" />
      </div>
      <el-table
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          :show-overflow-tooltip="true"
          prop="project_no"
          label="项目编号"
          width="160"
        >
          <template slot-scope="scope">
            <!-- <el-link  @click="markImport(scope.row)" type="primary">{{scope.row.project_no}}</el-link> -->
            <div
              v-if="$route.name == 'allProject' && isAdmin == 1"
              class="row-hidden"
              @click="markImport(scope.row)"
            >
              <i
                v-if="scope.row.iskey == 1"
                class="el-icon-star-on"
                style="color: #ea5e56"
              />
              <i
                v-if="scope.row.iskey == 0"
                class="el-icon-star-on"
                style="color: #ddd"
              />
              <span>{{ scope.row.project_no }}</span>
            </div>
            <div v-else>
              <i
                v-if="scope.row.iskey == 1"
                class="el-icon-star-on"
                style="color: #ea5e56"
              />
              <i
                v-if="scope.row.iskey == 0"
                class="el-icon-star-on"
                style="color: #ddd"
              />
              <span>{{ scope.row.project_no }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="project_name"
          label="项目名称"
          width="160"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="project_classname"
          label="项目类别"
          width="100"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="project_level"
          label="优先级别"
          width="80"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="project_pmname"
          label="项目经理"
          width="80"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="stage_name"
          label="当前阶段"
          width="80"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="month_plan"
          label="当月计划"
          min-width="200"
        >
          <template slot-scope="scope">
            <div class="row-hidden" v-html="scope.row.month_plan" />
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="is_check"
          label="是否考核"
          width="80"
        >
          <template slot-scope="scope">
            <span
              v-if="$route.name == 'allProject' && isAdmin == 1"
              @click="markCheck(scope.row)"
              style="color: #409eff; cursor: pointer"
              >{{ scope.row.is_check == 1 ? "是" : "否" }}</span
            >
            <span v-else>{{ scope.row.is_check == 1 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="curr_status"
          label="当前状态"
          width="80"
        >
          <template slot-scope="scope">
            <div
              v-if="$route.name == 'allProject' && isAdmin == 1"
              class="row-hidden"
              @click="currStatus(scope.row)"
            >
              <span
                :style="{ color: scope.row.curr_status == '异常' ? 'red' : '' }"
                >{{ scope.row.curr_status }}</span
              >
            </div>
            <div class="row-hidden" v-else>{{ scope.row.curr_status }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="reason"
          label="状态原因"
          width="130"
        ></el-table-column>
        <el-table-column prop="version" label="操作" width="270">
          <template slot-scope="scope">
            <el-button
              v-if="!uid && isAdmin == 1 ? true : false"
              size="small"
              icon="el-icon-edit"
              @click="documentEdit(scope.row, 'edit')"
              >编辑</el-button
            >
            <el-button
              size="small"
              icon="el-icon-view"
              @click="documentDetail(scope.row, 'detail')"
              >详情</el-button
            >
            <el-button
              v-if="!uid && isAdmin == 1 ? true : false"
              size="small"
              icon="el-icon-delete"
              @click="documentDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="box-page"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="total,sizes, prev, pager, next"
        :total="pagination.total"
      ></el-pagination>
    </el-card>
    <EditForm
      ref="editForm"
      v-if="visible"
      :datas.sync="editRow"
      :shows.sync="visible"
      :isAdd.sync="isAdd"
      :baseStyle="baseStyle"
      :saveForm="submit"
      :uid="userInfo.user.id"
    />
    <EditDetail
      v-if="showsDetail"
      :datas.sync="editRow"
      :showsDetail.sync="showsDetail"
      :baseStyle="baseStyle"
    />
    <EditStatus :saveForm="statusChange" ref="editStatus" />
  </div>
</template>

<script>
import API from "@apis/newProject";
import { mapState } from "vuex";
import SearchForm from "./search";
import EditForm from "./editForm/editForm";
import EditDetail from "./editForm/editDetail";
import EditStatus from "./editForm/editStatus";
export default {
  data() {
    return {
      loading: false,
      keyWord: {},
      uid: "",
      isAdmin: "",
      tableData: [],
      pagination: {
        currentPage: 1,
        pageNo: 1,
        pageSize: 5,
        total: 0,
      },
      editRow: {},
      visible: false,
      isAdd: false,
      baseStyle: {
        width: "140px",
      },
      showsDetail: false,
      stateMsg: "",
    };
  },
  components: {
    SearchForm,
    EditForm,
    EditDetail,
    EditStatus,
  },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
  },
  created() {
    this.isAdmin = this.userInfo.user.is_admin;
    if (this.$route.name == "mineproject") {
      this.uid = this.userInfo.user.id;
      // this.getProjectList(1);
    }
    if (this.$route.name == "allProject") {
      this.uid = "";
      // this.getProjectList(1);
    }
    this.loading = true;
    this.getProjectList(1);
  },
  mounted() {},
  methods: {
    submitSearch(val) {
      // console.log(val, "search");
      this.keyWord = { ...val };
      this.loading = true;
      this.getProjectList(1);
    },
    getProjectList(val = 1) {
      let parmars = {
        uid: this.uid,
        pageNo: val,
        pageSize: this.pagination.pageSize,
        ...this.keyWord,
      };
      API.getAllProjectList(parmars)
        .then((res) => {
          this.pagination = {
            currentPage: res.current_page,
            pageNo: res.current_page,
            pageSize: res.per_page,
            total: res.total,
          };
          this.tableData = [];
          res.data.map((item) => {
            this.tableData.push({
              ...item,
              // month_plan: "1.szis说的wawsswasdxwaesdzxawsesdzxweasz<BR/>2.sannsai<br/>3.sdnsicx"
            });
          });
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.loading = false;
        });
    },
    //控制每页条数
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loading = true;
      this.getProjectList(this.pagination.pageNo);
    },
    //分页
    handleCurrentChange(val) {
      this.loading = true;
      this.getProjectList(val);
    },

    //模态弹窗封装
    conformFunc(row, text, item, func) {
      //row:当前列表行数据;text:提示文字;item:提示文字中需要修改的字段名;
      //func:点击确定或者取消执行的函数
      let parmars = {
        project_id: row.id,
      };
      parmars[item] = 1;
      this.$confirm(text, "提示", {
        closeOnClickModal: false,
        confirmButtonText: "确定标记",
        cancelButtonText: "取消标记",
        type: "warning",
        distinguishCancelAndClose: true,
      })
        .then(() => {
          parmars[item] = 1;
          func(parmars);
        })
        .catch((action) => {
          if (action == "cancel") {
            parmars[item] = 0;
            func(parmars);
          }
        });
    },
    //标记重点项目
    markAPI(parmars) {
      this.loading = true;
      API.markImport(parmars)
        .then((res) => {
          this.getProjectList(this.pagination.pageNo);
        })
        .catch((err) => {
          console.log(err, "err");
          this.$message.error(err.message);
        });
    },
    markImport(row) {
      this.conformFunc(row, "是否标记为重点项目?", "status", this.markAPI);
    },
    //标记是否参与考核
    checkAPI(parmars) {
      this.loading = true;
      API.setProjectCheck({
        id: parmars.project_id,
        is_check: parmars.is_check,
      })
        .then((res) => {
          this.getProjectList(this.pagination.pageNo);
        })
        .catch((err) => {
          console.log(err, "err");
          this.$message.error(err.message);
        });
    },
    markCheck(row) {
      this.conformFunc(row, "是否标记为考核项目?", "is_check", this.checkAPI);
    },
    //项目状态修改
    currStatus(thin) {
      this.$refs.editStatus.setDate(thin);
      this.$refs.editStatus.openDialog();
    },
    statusChange(parmars) {
      API.changeCurrStageStatus(parmars)
        .then((res) => {
          this.$refs.editStatus.cancelDialog();
          this.loading = true;
          this.getProjectList(this.pagination.pageNo);
        })
        .catch((err) => {
          this.$refs.editStatus.cancelLoading();
          if (err.data.code) {
            this.$message.error(err.message);
            return;
          }
        });
    },
    addProject() {
      this.editRow = { teamData: [], skillerList: [], pmList: [] };
      this.isAdd = true;
      this.visible = true;
    },
    async getDetail(project_id, type) {
      await API.newProjectDetail(project_id)
        .then((res) => {
          let devTest = [];
          let teamData = [];
          let currentStageNum = 0;
          let skillerList = [
            { id: res.project_skiller, realname: res.project_skiller_name },
          ];
          let pmList = [{ id: res.project_pm, realname: res.project_pm_name }];
          res.teamlist.map((item) => {
            devTest.push(item.uid);
            teamData.push({ id: item.uid, realname: item.zn_name });
          });
          res.project_stageroute_object.map((item, index) => {
            if (item.curr_stage) {
              currentStageNum = index;
              return;
            }
          });
          // console.log(currentStageNum, "currentStageNum");
          //skillerList
          this.editRow = Object.assign(
            {
              ...res,
              devTest,
              teamData,
              skillerList,
              pmList,
              currentStageNum,
              // month_plan: "1.szis说的wawsswasdxwaesdzxawsesdzxweasz<BR/>2.sannsai<br/>3.sdnsicx"
            },
            this.editRow
          );
          if (type === "edit") {
            this.isAdd = false;
            this.visible = true;
          } else {
            this.showsDetail = true;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    documentEdit(row, type) {
      this.loading = true;
      this.getDetail(row.id, type);
    },
    documentDetail(row, type) {
      this.loading = true;
      this.getDetail(row.id, type);
    },
    documentDel(row) {
      this.$confirm("删除项目, 是否继续?", "提示", {
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.pagination.pageNo > 1 && this.tableData.length == 1) {
            this.pagination.pageNo = this.pagination.pageNo - 1;
          }
          this.loading = true;
          API.projectDel(row.id)
            .then((res) => {
              this.getProjectList(this.pagination.pageNo);
            })
            .catch((err) => {
              // return row.status;
            });
        })
        .catch(() => {});
    },
    submit(val) {
      // console.log(val,"formData");
      if (this.isAdd) {
        API.newProjectAdd({ uid: this.userInfo.user.id, ...val })
          .then((res) => {
            this.$refs.editForm.cancel();
            this.loading = true;
            this.getProjectList(1);
            this.$message.success("添加成功！");
          })
          .catch((err) => {
            this.$refs.editForm.cancelLoading();
            this.$message.error(err.message);
          });
      } else {
        API.newProjectEdit({ project_id: this.editRow.project_id, ...val })
          .then((res) => {
            this.getProjectList(this.pagination.pageNo);
            this.$message.success("修改成功！");
            this.$refs.editForm.cancel();
          })
          .catch((err) => {
            this.$refs.editForm.cancelLoading();
            this.$message.error(err.message);
          });
      }
    },
  },
  watch: {
    $route: function (to, from) {
      // console.log(to, "to", from, "from");
      if (to.name == "mineproject") {
        this.uid = this.userInfo.user.id;
        this.keyWord = {};
        this.loading = true;
        this.getProjectList(1);
        this.$refs.searchForm.reSet();
      }
      if (to.name == "allProject") {
        this.uid = "";
        this.keyWord = {};
        this.loading = true;
        this.getProjectList(1);
        this.$refs.searchForm.reSet();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box-title-position {
  position: relative;
  .add-btn {
    position: absolute;
    right: 0;
    top: -3px;
  }
}
.box-construction {
  min-height: 100px;
  .box-page {
    text-align: right;
    padding-top: 40px;
  }
}
.row-hidden {
  overflow: hidden;
  width: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.row-hidden > span {
  color: #409eff;
  cursor: pointer;
}
</style>